import {useEffect, useState} from 'react';
import {HeadersNav} from './HeaderNav.tsx';
import {NullComponent} from '../shared/EmptyComponent.tsx';

export const Header = ({RightSlot = NullComponent}: { RightSlot?: React.FC }) => {
    const [timer, setTimer] = useState(0)

    useEffect(() => {
        const timerId = setInterval(() => {
            setTimer(timer => timer + 1)
        }, 1000)
        return () => clearInterval(timerId)
    }, [])

    return <div style={{display: 'flex', width: '100%', justifyContent: 'space-between'}}>
        <HeadersNav/>
        {timer}
        <RightSlot/>
    </div>
}

